<template>
    <div class="goodlist">

        <!-- <router-link :to="'/home/goodinfo/'+item.id" class="good-item" @click="goodinfo(item.id)" v-for="item in goodlist" :key="item.id">
            <img :src="item.img_url">
            <h3 class="title">{{item.title}}</h3>
            <div class="info">
                <div class="price">
                    <span>￥{{item.sell_price}}</span>
                    <span>&nbsp;￥{{item.market_price}}</span>
                </div>
                <div class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </div>
            </div>
        </router-link> -->

        <div class="good-item" @click="goodinfo(item.id)" v-for="item in goodlist" :key="item.id">
            <img :src="item.img_url">
            <h3 class="title">{{item.title}}</h3>
            <div class="info">
                <div class="price">
                    <span>￥{{item.sell_price}}</span>
                    <span>&nbsp;￥{{item.market_price}}</span>
                </div>
                <div class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getmore">加载更多</mt-button>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            pageindex:1,
            goodlist:[
                {id:1,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:2,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:3,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:4,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:5,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:6,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:7,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:8,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:9,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:10,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:11,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:12,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:13,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:14,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img13.360buyimg.com/n7/jfs/t1/624/22/3738/603387/5b996fafE1b7f7bce/24dd7aacfec1748d.png",sell_price:1200,market_price:2000,stock_quantity:30},
                {id:15,title:"华为荣耀6plus,16G双4G版",add_time:"2015-1-1 1:1:1",img_url:"https://img.alicdn.com/tfs/TB1cJ4EMSzqK1RjSZPxXXc4tVXa-800-800.png_200x200Q90.jpg_.webp",sell_price:1200,market_price:2000,stock_quantity:30},
            ]
        }
    },
    created(){
        this.getgood()
    },
    methods:{
        getgood(){
            this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
                if(result.body.status===0){
                    this.goodlist=this.goodlist.concat(result.body.message)

                }
            })
        },
        getmore(){
            this.pageindex++
            this.getgood()
        },
        goodinfo(id){
            // this.$router.push("/home/goodinfo/"+id)
            // this.$router.push({path:"/home/goodinfo/"+id})
            this.$router.push({name:"user",params:{id}})
            // console.log(id)
        }
    }
}
</script>

<style lang="scss" scoped>
    .goodlist{
        display: flex;
        //换行
        flex-wrap: wrap;
        padding: 7px;
        justify-content: space-between;
        .good-item{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 49%;
            border: 1px solid #ccc;
            box-shadow: 5px 0 8px #ccc;
            margin: 3px 0px;
            // padding加给每一个item,而每个item的width=padding+真正盛放内容的width;
            // padding的区域颜色也会有。
            padding: 2px;
            // 设置最低高度；
            min-height: 323px;
            img{
                width: 100%;
            }
            .title{
                font-size: 15px;
                padding-top: 10px;
            }
            .info{
                // position: fixed;
                bottom: 0px;
                background-color: #ccc;
                line-height: 30px;
                padding: 3px;
                .price{
                    font-size: 13px;
                    :first-child{
                        color: red;
                        font-weight: bold;
                        padding-right: 10px;
                    }
                    :last-child{
                        text-decoration: line-through;
                        // text-indent 属性规定文本块中首行文本的缩进。
                        // text-indent: 2px;
                    }
                 }
                 .sell{
                     display: flex;
                     justify-content: space-between;
                     font-size: 13px;
                     
                 }
            }
            
        }
    }
</style>
